<template>
  <div>
    <div class="m-anthor">
      <t-tabs
        :ref="
          el => {
            Widget.tab1 = el;
          }
        "
        :staticItems="[
          {
            label: '新建',
            code: '111',
          },
          {
            label: '编辑',
            code: '222',
          },
          {
            label: '开发完成',
            code: '333',
            icon: 'add',
          },
        ]"
        tabPosition="top"
        type="none"
        fillMode="fixedHeight"
        height="150px"
        :visible="true"
        fillMarginBottom="10px"
        :hideTabLabel="false"
        tabindex="2"
        activeColor="#f33"
        style="margin-top: 20px"
        v-model="index"
        @onChange="onChange"
      >
        <t-tab-panel name="111"><div style="padding: 20px">标签1内容</div></t-tab-panel>
        <t-tab-panel name="222"><div style="padding: 20px">标签2内容</div></t-tab-panel>
        <t-tab-panel name="333"><div style="padding: 20px">标签3内容</div></t-tab-panel>
      </t-tabs>

      <div @click="changeLabel"> 点击改变标题 </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, nextTick } from 'vue';

let Widget = { tab1: null };

const index = ref(1);

async function changeLabel() {
  await nextTick();
  Widget.tab1.changeTabLabel(2, 'over');
}

function onChange() {
  console.log('onchange');
}
</script>

<style lang="scss" scoped>
.m-anthor {
}

.m-list {
  margin-top: 50px;
  height: 800px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 100px;
}
</style>
